<template>
	<view class="content">
		<view class="recruitment-method">
			<text class="section-title">招聘方式</text>
			<view class="method-tabs">
				<view class="tab" :class="{ active: recruitmentMethod === '公司直招' }" @click="selectRecruitmentMethod('公司直招')">公司直招</view>
				<view class="tab" :class="{ active: recruitmentMethod === '中介代招' }" @click="selectRecruitmentMethod('中介代招')">中介代招</view>
				<view class="tab" :class="{ active: recruitmentMethod === '中介派遣' }" @click="selectRecruitmentMethod('中介派遣')">中介派遣</view>
			</view>
		</view>

		<view class="form-section">
			<view class="form-item">
				<text class="item-title">招聘类型</text>
				<view class="item-content">
					<picker @change="bindRecruitmentTypeChange" :value="recruitmentTypeIndex" :range="recruitmentTypeOptions">
						<view class="uni-input">{{recruitmentTypeOptions[recruitmentTypeIndex] || '请选择招聘类型，如小时工、日工'}}</view>
					</picker>
					<text class="arrow">></text>
				</view>
			</view>

			<view class="form-item" @click="toPositionName">
				<text class="item-title">职位名称</text>
				<view class="item-content">
					<input disabled placeholder="请填写职位名称，如操作工，普通工" :value="companyName" />
					<text class="arrow">></text>
				</view>
			</view>

			<view class="form-item" @click="jobDes">
				<text class="item-title">职位描述</text>
				<view class="item-content">
					<input disabled placeholder="请输入职位描述" :value="workContent" />
					<text class="arrow">></text>
				</view>
			</view>

			<view class="form-item" @click="toPositionType">
				<text class="item-title">职位类型</text>
				<view class="item-content">
					<input disabled placeholder="请选择职位类型" :value="positionType" />
					<text class="arrow">></text>
				</view>
			</view>
		</view>

		<view class="next-btn-container">
			<button class="next-btn" @tap="nextStep">下一步</button>
		</view>
		
		<!-- 提交信息 -->
		<uni-popup id="dialogInput" ref="dialogInput" type="dialog">
			<uni-popup-dialog id="dialogInput2" ref="dialogInput2" mode="input" :title="dialogTitle" :value="value" placeholder="请输入内容(2-8字)" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import {
	formatDate,
	calCurrentYear
} from '@/common/date';
export default {
	components: {
	},
	computed: {
		...mapState(['openId', 'customerInfo']),
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},

	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			id: 0,
			date1: currentDate,
			date2: currentDate,
			workContent: '',
			recruitmentType: '',
			recruitmentTypeOptions: ['小时工', '日工'],
			recruitmentTypeIndex: -1,
			positionType: '',
			recruitmentMethod: '公司直招', // 默认选择"公司直招"
			selectPost: {
				name: '',
				id: ''
			},
			selectIndustrys: null,
			selectIndustryName: '',
			selectIndustryIds: '0',
			companyName: '',
			department: '',
			skills:[],
			dialogTitle:'添加关键词',
			value:"",
		};
	},
	onLoad(query) {
		this.id = query.id;
		if (this.id) {
			this.getDetail();
		}
	},
	methods: {
		// 选择招聘方式
		selectRecruitmentMethod(method) {
			this.recruitmentMethod = method;
		},
		
		// 招聘类型选择变化
		bindRecruitmentTypeChange(e) {
			this.recruitmentTypeIndex = e.detail.value;
			this.recruitmentType = this.recruitmentTypeOptions[this.recruitmentTypeIndex];
		},
		
		// 跳转到职位名称页面
		toPositionName() {
			uni.navigateTo({
				url: '/pages/user/positionManagement/positionName'
			});
		},
		
		jobDes(){
			uni.navigateTo({
				url: '/pages/user/positionManagement/jobDes',
			})
		},
		toRecruitmentType() {
			// 导航到招聘类型选择页面
			uni.navigateTo({
				url: '/pages/user/positionManagement/recruitmentType',
			})
		},
		toPositionType() {
			// 导航到职位类型选择页面
			uni.navigateTo({
				url: '/pages/user/positionManagement/positionType',
			})
		},
		formatDates(time){
			if (time == null || time === '') {
				return '';
			}
			let str = time.replace(/-/g,'/');
			let date = new Date(str);
			return formatDate(date, 'yyyy-MM-dd')
		},
		
		async getDetail() {
			let res = await this.$apis.getWorkExpDetail({ id: this.id });
			if (res) {
				this.selectPost.id = res.postId;
				this.selectPost.name = res.postName;
				if(res.industryName){
					this.selectIndustryName = res.industryName;
					this.selectIndustryIds = res.industryId;
				}
				this.date1 = res.startDate;
				this.date2 = res.endDate;
				this.workContent = res.jobContent;
				this.companyName = res.companyName;
				this.department = res.department;
				if(res.skill){
					this.skills=res.skill.split(",");
				}
			}
		},

		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 0;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},

		// 下一步按钮点击事件
		nextStep() {
			if (!this.companyName) {
				uni.showToast({
					icon: 'none',
					title: '请输入职位名称'
				});
				return;
			}
			// 导航到下一步
			uni.navigateTo({
				url: '/pages/user/positionManagement/nextStep'
			});
		},
		
		dialogInputConfirm(val) {
			if(!val){
				uni.showToast({
					icon:'none',
					title:"请输入内容"
				})
				return;
			}
			if(val.length<2 || val.length >8){
				uni.showToast({
					icon:'none',
					title:"请输入2-8个字"
				})
				return;
			}
			this.skills.push(val);
			this.$refs.dialogInput.close();
		},
	}
};
</script>

<style lang="scss" scoped>
.content {
	background: #f5f5f5;
	padding-bottom: 120rpx;
	min-height: 100vh;
}

.recruitment-method {
	padding: 30rpx 30rpx 20rpx;
	background: #fff;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.method-tabs {
	display: flex;
	margin-top: 20rpx;
}

.tab {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	font-size: 28rpx;
	color: #333;
	background-color: #f5f5f5;
	margin-right: 10rpx;
	border-radius: 8rpx;
	
	&:last-child {
		margin-right: 0;
	}
	
	&.active {
		background-color: #3A92FF;
		color: #fff;
	}
}

.form-section {
	margin-top: 20rpx;
	background: #fff;
}

.form-item {
	display: flex;
	flex-direction: column;
	padding: 30rpx;
	border-bottom: 1rpx solid #eee;

	&:last-child {
		border-bottom: none;
	}
}

.item-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.item-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	input, .uni-input {
		flex: 1;
		height: 60rpx;
		font-size: 28rpx;
		color: #999;
	}
	
	.arrow {
		font-size: 30rpx;
		color: #ccc;
	}
}

.next-btn-container {
	padding: 30rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
}

.next-btn {
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	background-color: #3A92FF;
	color: #fff;
	font-size: 32rpx;
	border-radius: 10rpx;
}
</style>
